<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
			* {
			  margin: 0;
			  padding: 0;
			  box-sizing: border-box;
		
			}
			#a{
				width: 1000px;
				height: 555px;
				border: 3px solid gainsboro;
				margin: 0 auto;
			    margin-top: 180px; 
			}
			#b{
				width: 700px;
				height: 550px;
				border-radius: 1%;
				position: absolute;
			}
			#c{
				width: 298px;
				height: 550px;
				border: 1px solid gainsboro;
				float: right;
				position: relative;
			}
			h1{
				margin-left: 280px;
				margin-top: 60px;
				font-size: 20px;
			}
			.b1{
				width: 300px;
				height: 50px;
				margin-left: 180px;
				margin-top: 30px;
			}
			#b input{
				width: 300px;
				height: 30px;
				margin-top: 10px;
				float: left;
				border: none;
				outline: none;
			}
		
			.b1 span{
				font-size: 15px;
				float: left;
				margin-top: -30px;
				transition-duration: 2.5s;
			}
			.b1 span:hover{
				color: red;
				font-size: 10px;
				margin-top: -35px;
			}
			.b1:hover{
				color: red;
				font-size: 10px;
			}
			.b2{
				margin-top: 50px;
				margin-left: 220px;
			}
			.b2 button{
				width: 200px;
				height: 35px;
				background-color: purple;
				border-radius: 20px;
				color: white;
			}
			.b2 a{
				margin-left: 55px;
				margin-top: 50px;
				font-size: 12px;
				text-decoration: none;
			}
			#b3{
				margin-left: 100px;
			}
			#b3 img{
				width: 50px;
				height: 50px;
				margin: 40px;
				margin-top: 80px;
			}
			#c img{
				position: absolute;
			}
			#c span{
				position: absolute;
				left: 28%;
				top: 20%;
				color: white;
				font-size: 25px;
			}
			#c p{
				position: absolute;
				left: 15%;
				top: 30%;
				color: white;
			}
		
			#c1{
				width: 90px;
				height: 50px;
				position: absolute;
				left: 35%;
				top: 315px;
				border: 2px solid white;
				border-radius: 20px;
			}
			#c1:hover{
				left: 33%;
				top: 300px;
				width: 110px;
				height: 70px;
				transition-duration: 1s;
				font-size: 20px;
			}
			#c1 a{
				position: absolute;
				left: 18%;
				top: 30%;
				text-decoration: none;
				color: white;
				transition-duration: 5s;
			}
		</style>
	</head>
	<body>
		<body>
		<div id="a">
			<div id="b">
				<h1>SIGN IN</h1>
				<div class="b1">
					<input type="text" />
					<span>email address</span>
					<hr />
				</div>
				<div class="b1">
					<input type="text" />
					<span>password</span>
					<hr />
				</div>
				<div class="b2">
					<button>SIGN IN</button><br />
					<a href="Easter egg.html">Forgot Password?</a>
				</div>
				<div id="b3">
					<img src="img/wechat.png" title="微信"/>
					<img src="img/qq.png" title="qq"/>
					<img src="img/src=http___i0.hdslb.com_bfs_article_081444dda4a02d0552214c4debefcb345cb21f87.jpg&refer=http___i0.hdslb.jpg" title="instagram"/>
					<img src="img/sina.png" title="微博"/>
				</div>
			</div>
			<div id="c">
				<img src="img/signin.jpg" style="width: 298px;height: 550px;border-radius: 1%;" />
				<span>One of us?</span>
				<p>If you already has an accout,<br />
				just aign in.We've missed you!
				</p>
				<div id="c1"><a href="index.html">SIGN UP</a></div>
				
			</div>
		</div>
	</body>
</html>
